<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="./img/favicon.png">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <link rel="stylesheet" href="./css/footer.css">
    <title>小米有品</title>
</head>

<body>
    <!-- head -->
    <header></header>

    <!-- banner -->
    <div class="banner">
        <div class="container">
            <div class="banner-main">
                <nav>
                    <ul>
                        <li><a href="" class="sort">有品推荐</a> /
                            <a href="" class="sort">手机数码</a>
                        </li>
                        <li><a href="" class="sort">家用电器</a> /
                            <a href="" class="sort">智能家庭</a>
                        </li>
                        <li><a href="" class="sort">美食酒饮</a> /
                            <a href="" class="sort">家具家装</a>
                        </li>
                        <li><a href="" class="sort">电脑办公</a> /
                            <a href="" class="sort">出行车品</a>
                        </li>
                        <li><a href="" class="sort">服装配饰</a> /
                            <a href="" class="sort">运动户外</a>
                        </li>
                        <li><a href="" class="sort">健康保健</a> /
                            <a href="" class="sort">美妆个护</a>
                        </li>
                        <li><a href="" class="sort">日用文创</a> /
                            <a href="" class="sort">家纺餐厨</a>
                        </li>
                        <li><a href="" class="sort">鞋靴箱包</a> /
                            <a href="" class="sort">母婴亲子</a>
                        </li>
                        <li><a href="" class="sort">宠物生活</a> /
                            <a href="" class="sort">有品海购</a>
                        </li>
                        <li><a href="" class="sort">DLAB</a>
                        </li>
                    </ul>
                </nav>
                <div class="banner-lunbotu">
                    <!-- Swiper -->
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide"><img src="./img/banner1.png" alt=""></div>
                            <div class="swiper-slide"><img src="./img/banner2.png" alt=""></div>
                            <div class="swiper-slide"><img src="./img/banner3.jpeg" alt=""></div>
                            <div class="swiper-slide"><img src="./img/banner4.jpeg" alt=""></div>
                            <div class="swiper-slide"><img src="./img/banner5.jpeg" alt=""></div>
                            <div class="swiper-slide"><img src="./img/banner6.jpeg" alt=""></div>
                            <div class="swiper-slide"><img src="./img/banner7.jpeg" alt=""></div>
                        </div>
                        <!-- Add Arrows -->
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                        <!-- Add Pagination -->
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
                <div class="banner-link">
                    <ul>
                        <li>
                            <a href="/">
                                <img src="./img/link1.png" alt="">
                                <p>上新精选</p>
                            </a>
                        </li>
                        <li>
                            <a href="/">
                                <img src="./img/link2.png" alt="">
                                <p>小米众筹</p>
                            </a>
                        </li>
                        <li>
                            <a href="/">
                                <img src="./img/link3.png" alt="">
                                <p>有品秒杀</p>
                            </a>
                        </li>
                        <li>
                            <a href="/">
                                <img src="./img/link4.png" alt="">
                                <p>热销榜单</p>
                            </a>
                        </li>
                        <li>
                            <a href="/">
                                <img src="./img/link5.png" alt="">
                                <p>小米自营</p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- crowdfunding -->
    <div class="crowdfunding">
        <div class="crowdfunding-container">
            <div class="cc-top">
                <h2>小米有品众筹
                    <span>永远好奇 永远年轻</span>
                    <a href="#" class="p-more">更多</a>
                </h2>
            </div>
            <div class="cc-main">
                <div class="main-left">
                    <div class="prod">
                        <img src="./img/comm3.png" alt="">
                        <div class="description">
                            <p class="prod-name">云米AI智目吸烟灶</p>
                            <p class="prod-desc">双红外探测 风随烟动 | 上下双吸</p>
                            <p class="prod-price">¥ 2999</p>
                        </div>
                    </div>
                    <div class="bar"></div>
                    <div class="info">
                        <div class="info-left">
                            <span class="num">1895</span>人支持
                        </div>
                        <span class="status">爆</span>
                        <div class="m">
                            <span class="m-num">567</span>
                            <span class="m-p">%</span>
                        </div>
                    </div>
                </div>
                <div class="main-small center">
                    <div class="prod">
                        <img src="./img/comm2.png" alt="">
                        <div class="description">
                            <p class="prod-name">贝氪智能办公椅</p>
                            <p class="prod-price">¥ 899</p>
                        </div>
                    </div>
                    <div class="bar"></div>
                    <div class="info">
                        <div class="info-left">
                            <span class="num">8186</span>人支持
                        </div>
                        <span class="status">爆</span>
                        <div class="m">
                            <span class="m-num">818</span>
                            <span class="m-p">%</span>
                        </div>
                    </div>
                </div>
                <div class="main-small right">
                    <div class="prod">
                        <img src="./img/comm2.png" alt="">
                        <div class="description">
                            <p class="prod-name">云麦按摩筋膜枪CC</p>
                            <p class="prod-price">¥ 399</p>
                        </div>
                    </div>
                    <div class="bar"></div>
                    <div class="info">
                        <div class="info-left">
                            <span class="num">10815</span>人支持
                        </div>
                        <span class="status">火</span>
                        <div class="m">
                            <span class="m-num">431</span>
                            <span class="m-p">%</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- miaosha -->
    <div class="miaosha">
        <div class="miaosha-container">
            <div class="mc-top">
                <div class="text">
                    <h2>小米秒杀</h2>
                    <span class="timeOut"><i class="iconfont icon-naozhong_huaban"></i> 20:00场</span>
                </div>
                <div class="timer">
                    <span class="timeItem hour">02</span>
                    <span class="time-m">:</span>
                    <span class="timeItem minute">19</span>
                    <span class="time-m">:</span>
                    <span class="timeItem second">36</span>
                </div>
                <div class="more">
                    <a href="#" class="p-more">更多</a>
                </div>
            </div>
            <div class="prod">
                <div class="swiper-container1">
                    <div class="swiper-wrapper pro-item">

                    </div>
                    <!-- 左右翻页 -->
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- dayNews -->
    <div class="news">
        <div class="n-con">
            <div class="n-top">
                <h2>每日新品
                    <span>每天10点 惊喜不断</span>
                    <a href="#" class="p-more">更多</a>
                </h2>
            </div>
            <div class="n-main">
                <!-- Swiper -->
                <div class="swiper-container1 prods">
                    <div class="swiper-wrapper new-item">

                    </div>
                    <!-- 左右按钮 -->
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 专属推荐 -->
    <div class="section">
        <div class="s-con">
            <div class="s-top">
                <h2>专属推荐</h2>
            </div>
            <div class="product"></div>
        </div>
    </div>


    <!-- fexed-box -->
    <div class="f-box"></div>
    <!-- footer -->
    <footer></footer>

    <!-- 登陆提示 -->
    <div class="login">
        <div class="login-con">
            <span class="close"></span>
            <div class="agreement">
                <p class="title">声明与政策</p>
                <div class="contain">
                    <p class="welcome">欢迎您来到小米有品！</p>
                    <p>我们依据最新法律法规要求，制定并更新了<span>《隐私政策》</span>、
                        <span>《小米有品用户协议》</span>以及<span>《小米帐号使用协议》</span>。
                    </p>
                    <p>您需阅读并同意相关政策条款方可进行登录。</p>
                </div>
                <div class="btn-con">
                    <button class="agree">同意并继续</button>
                    <button class="n-agree">不同意</button>
                </div>
            </div>
        </div>
    </div>



    <script src="./libs/swiper/swiper-bundle.min.js"></script>
    <script>
        var mySwiper = new Swiper('.swiper-container', {
            direction: 'horizontal', // 垂直切换选项
            loop: true, // 循环模式选项
            autoplay: {
                disableOnInteraction: false,
            },// 自动播放

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
                clickable: true
            },

            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            }
        })
    </script>
    <script>
        var swiper = new Swiper('.swiper-container1', {
            slidesPerView: 4,
            spaceBetween: 5,
            slidesPerGroup: 1,
            loop: false,
            loopFillGroupWithBlank: true,

            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
    </script>
    <script src="./libs/requirejs/require.js" data-main="./js/index"></script>

    <script type="text/html" id="tuijian-template">
            {{each product prod}}
            <div class="prod" data-id="{{prod.id}}">
                    <div class="img-con">
                        <div class="imgcon">
                            <img src="{{prod.image}}" alt="">
                        </div>
                        <p></p>
                    </div>
                    <div class="text">
                        <div class="tag">
                            <span class="common">{{prod.couponValue ? prod.couponValue : '无优惠券'}}</span>
                            <span class="common">{{prod.platform === 1 ? "淘宝" : "天猫"}}</span>
                        </div>
                        <p class="info">{{prod.title}}</p>
                        <p class="price">
                            <span class="unit">¥</span>
                            <span class="num">{{prod.price}}</span>
                        </p>
                    </div>
            </div>
            {{/each}}
        </script>
    <script type="html/text" id="swiper1">
            <% for (let i = 0; i < 8; i++) { %>
                <div class="swiper-slide prod-main slide-item" data-id="<%= product[i].id %>">
                    <div class="imgcon">
                        <img src="<%= product[i].image %>" alt="">
                    </div>
                    <div class="prod-text">
                        <p class="desc"><%= product[i].title %></p>
                        <p class="price">
                            <span class="unit">¥</span>
                            <span class="num"><%= product[i].price %></span>
                            <span class="flag">起</span>
                            <span class="market-price">
                                <span class="m-unit">¥</span>
                                <span class="m-num"><%= product[i].originPrice %></span>
                            </span>
                        </p>
                    </div>
            </div>
            <% } %>
        </script>
    <script type="html/text" id="swiper2">
            <% for (let i = 5; i < 11; i++) { %>
                <div class="swiper-slide n-prod slide-item" data-id="<%= product[i].id %>">
                    <div class="imgcon">
                        <img src="<%= product[i].image %>" alt="">
                    </div>
                    <div class="n-text">
                        <p class="name"><%= product[i].qunTitle %></p>
                        <p class="desc"><%= product[i].title %></p>
                        <p class="price">
                            <span class="unit">¥</span>
                            <span class="num"><%= product[i].price %></span>
                            <span class="flag">起</span>
                        </p>
                    </div>
                </div>
            <% } %>
        </script>
</body>

</html>